<template>
  <view class="mine-page">
    <!-- 顶部个人信息区 -->
    <view class="mine-header">
      <image class="avatar" src="/static/mine/avatar.png" />
      <view class="user-info">
        <view class="user-name">武士爱大力</view>
        <view class="user-phone">手机：13600000000</view>
      </view>
      <view class="header-icons">
        <uni-icons type="gear" size="28" color="#fff" />
        <uni-icons type="chat" size="28" color="#fff" style="margin-left: 16rpx;" />
      </view>
      <view class="user-tag">已实名</view>
    </view>
    <!-- 资产区 -->
    <view class="mine-assets">
      <view class="asset-item">
        <text class="asset-label">我的币币：</text>
        <text class="asset-value">8.56</text>
      </view>
      <view class="asset-action">立即充值</view>
    </view>
    <!-- 会员区 -->
    <view class="mine-vip">
      <view class="vip-left">
        <uni-icons type="vip" size="22" color="#f90" />
        <text class="vip-text">开通会员</text>
      </view>
      <view class="vip-right">
        <text class="vip-btn">开通会员</text>
      </view>
    </view>
    <!-- 信息管理 -->
    <view class="mine-section">
      <view class="section-title">信息管理</view>
      <view class="section-action">全部信息<uni-icons type="arrowright" size="18" color="#f90" /></view>
      <view class="section-grid">
        <view class="grid-item" v-for="item in infoList" :key="item.text">
          <uni-icons :type="item.icon" size="28" color="#3496fa" />
          <text class="grid-text">{{ item.text }}</text>
        </view>
      </view>
    </view>
    <!-- 我的服务 -->
    <view class="mine-section">
      <view class="section-title">我的服务</view>
      <view class="section-grid">
        <view class="grid-item" v-for="item in serviceList" :key="item.text">
          <uni-icons :type="item.icon" size="28" color="#3496fa" />
          <text class="grid-text">{{ item.text }}</text>
        </view>
      </view>
    </view>
    <!-- 我的订单 -->
    <view class="mine-section">
      <view class="section-title">我的订单</view>
      <view class="section-action">全部订单<uni-icons type="arrowright" size="18" color="#f90" /></view>
      <view class="section-grid order-grid">
        <view class="grid-item" v-for="item in orderList" :key="item.text">
          <uni-icons :type="item.icon" size="28" color="#3496fa" />
          <text class="grid-text">{{ item.text }}</text>
        </view>
      </view>
    </view>
    <!-- 功能列表 -->
    <view class="mine-list">
      <view class="list-item" v-for="item in funcList" :key="item.text">
        <text>{{ item.text }}</text>
        <uni-icons type="arrowright" size="20" color="#bbb" />
      </view>
    </view>
  </view>
  <!-- 添加底部栏 -->
  <view class="custom-tabbar">
    <view class="tabbar-item" :class="{active: tabIndex === 0}" @click="goHome">
      <uni-icons type="home" size="28" :color="tabIndex === 0 ? '#000' : '#888'" />
      <text>首页</text>
    </view>
    <view class="tabbar-item" :class="{active: tabIndex === 1}" @click="goTransfer">
      <uni-icons type="compass" size="28" :color="tabIndex === 1 ? '#000' : '#888'" />
      <text>发现</text>
    </view>
    <view class="tabbar-item center-btn" @click="onPublish">
      <view class="center-circle">
        <uni-icons type="plusempty" size="32" color="#fff" />
        <text>发布</text>
      </view>
    </view>
    <view class="tabbar-item" :class="{active: tabIndex === 3}" @click="goMessage">
      <view style="position:relative;">
        <uni-icons type="chat" size="28" :color="tabIndex === 3 ? '#000' : '#888'" />
        <view v-if="hasMsg" class="red-dot"></view>
      </view>
      <text>消息</text>
    </view>
    <view class="tabbar-item" :class="{active: tabIndex === 4}" @click="goMine">
      <uni-icons type="person" size="28" :color="tabIndex === 4 ? '#000' : '#888'" />
      <text>我的</text>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'

const tabIndex = ref(4) // 我的页面默认选中"我的"标签
const hasMsg = ref(true)

// 底部栏跳转方法
function goHome() {
  uni.navigateTo({ url: '/pages/index/index' })
}

function goTransfer() {
  uni.navigateTo({ url: '/pages/transfer/transfer' })
}

function onPublish() {
  uni.showToast({ title: '发布功能开发中', icon: 'none' })
}

function goMessage() {
  uni.navigateTo({ url: '/pages/message/message' })
}

function goMine() {
  uni.navigateTo({ url: '/pages/mine/mine' })
}

const infoList = [
  { icon: 'paperplane', text: '我的发布' },
  { icon: 'upload', text: '我的置顶' },
  { icon: 'megaphone', text: '我的推广' },
  { icon: 'compose', text: '审核中' }
]
const serviceList = [
  { icon: 'home', text: '我的主页' },
  { icon: 'gift', text: '优惠券' },
  { icon: 'chatbubble', text: '我的互动' },
  { icon: 'star', text: '我的收藏' },
  { icon: 'personadd', text: '招聘管理' },
  { icon: 'shop', text: '店铺管理' },
  { icon: 'people', text: '群管理' },
  { icon: 'gear', text: '管理后台' }
]
const orderList = [
  { icon: 'wallet', text: '待付款' },
  { icon: 'cart', text: '待发货' },
  { icon: 'gift', text: '待收货' },
  { icon: 'chat', text: '待评价' }
]
const funcList = [
  { text: '店铺入驻' },
  { text: '群入驻' },
  { text: '账户设置' },
  { text: '绑定邀请码' },
  { text: '信息流量统计' },
  { text: '认证中心' }
]
</script>
<style scoped>
.mine-page { 
  background: #f7f7f7;
  min-height: 100vh; 
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom)); 
}
.main-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 120rpx;
}
.mine-header {
  background: linear-gradient(90deg,#3496fa,#6ec6ff);
  padding: 32rpx 24rpx 24rpx 24rpx;
  border-bottom-left-radius: 32rpx;
  border-bottom-right-radius: 32rpx;
  position: relative;
  display: flex;
  align-items: center;
}
.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  margin-right: 24rpx;
}
.user-info {
  flex: 1;
}
.user-name {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
}
.user-phone {
  color: #e0f7fa;
  font-size: 22rpx;
  margin-top: 6rpx;
}
.header-icons {
  display: flex;
  align-items: center;
  margin-left: 12rpx;
}
.user-tag {
  position: absolute;
  left: 24rpx;
  bottom: 8rpx;
  background: #fff;
  color: #3496fa;
  font-size: 20rpx;
  border-radius: 16rpx;
  padding: 2rpx 14rpx;
  font-weight: bold;
}
.mine-assets {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  margin: 18rpx 18rpx 0 18rpx;
  border-radius: 16rpx;
  padding: 18rpx 24rpx;
  box-shadow: 0 2rpx 8rpx 0 rgba(80,80,120,0.06);
}
.asset-item { color: #333; font-size: 24rpx; }
.asset-value { color: #3496fa; font-size: 28rpx; font-weight: bold; margin-left: 8rpx; }
.asset-action { color: #f90; font-size: 24rpx; font-weight: bold; }
.mine-vip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fffbe6;
  margin: 18rpx 18rpx 0 18rpx;
  border-radius: 16rpx;
  padding: 18rpx 24rpx;
}
.vip-left { display: flex; align-items: center; }
.vip-text { color: #f90; font-size: 24rpx; margin-left: 8rpx; }
/* .vip-right { } */
.vip-btn { color: #fff; background: #f90; border-radius: 16rpx; padding: 6rpx 24rpx; font-size: 22rpx; font-weight: bold; }
.mine-section {
  background: #fff;
  margin: 18rpx 18rpx 0 18rpx;
  border-radius: 16rpx;
  padding: 18rpx 24rpx 12rpx 24rpx;
  position: relative;
}
.section-title { color: #222; font-size: 26rpx; font-weight: bold; }
.section-action {
  position: absolute;
  right: 24rpx;
  top: 18rpx;
  color: #f90;
  font-size: 22rpx;
  display: flex;
  align-items: center;
}
.section-grid {
  display: flex;
  flex-wrap: wrap;
  margin-top: 32rpx;
}
.order-grid { margin-top: 24rpx; }
.grid-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24rpx;
}
.grid-text { color: #444; font-size: 22rpx; margin-top: 8rpx; }
.mine-list {
  margin: 18rpx 18rpx 0 18rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
  font-size: 24rpx;
  color: #333;
}
.list-item:last-child { border-bottom: none; }

/* 添加底部栏样式 */
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.06);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.tabbar-item text {
  font-size: 20rpx;
  color: #888;
  margin-top: 4rpx;
}

.tabbar-item.active text {
  color: #000;
}

.center-btn {
  position: relative;
  top: -20rpx;
}

.center-circle {
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #3496fa, #6ec6ff);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 8rpx rgba(52, 150, 250, 0.3);
}

.center-circle text {
  color: #fff;
  font-size: 20rpx;
  margin-top: 4rpx;
}

.red-dot {
  position: absolute;
  top: -4rpx;
  right: -4rpx;
  width: 16rpx;
  height: 16rpx;
  background: #ff4d4f;
  border-radius: 50%;
  border: 2rpx solid #fff;
}
</style> 